<template>
  <div class="summoner">
    <Top></Top>
    <div class="con3">
      <Title></Title>
      <ul class="herolist-nav">
        <li :class="{current:index===setcurrent}" v-for="(item,index) in getdata1" :key="item.id">
          <router-link :to="item.path" class="herolist-tab">{{item.name}}</router-link>
        </li>
      </ul>
      <div class="summoner-box">
        <div class="sum-type clearfix">
          <ul class="sum-left clearfix">
            <li v-for="(sumlist,index) in sumlist" :key="sumlist.id" :class="index===sel?'current':''" @click="tab(sumlist.bigimg,sumlist.summoner_name,sumlist.summoner_rank,sumlist.summoner_description,index)">
              <img :src="sumlist.img" alt />
              {{sumlist.summoner_name}}
            </li>
          </ul>
          <div class="sum-right clearfix">
            <div class="sum-top clearfix">
              <img :src="bigimg" alt />
              <h4>{{title}}</h4>
              <p>{{lv}}</p>
            </div>
            <div class="sum-bottom">{{present}}</div>
          </div>
        </div>
      </div>
    </div>
    <Buttom></Buttom>
  </div>
</template>
<script>
import Title from '../../components/title'
import Top from '../../components/Top'
import Buttom from '../../components/Buttom'
export default {
  data: () => ({
    sel: 0,
    bigimg: 'https://game.gtimg.cn/images/yxzj/img201606/summoner/80102-big.jpg',
    title: '惩击',
    lv: 'LV.1解锁',
    present: '30秒CD：对身边的野怪和小兵造成真实伤害并眩晕1秒',
    sumlist: [],
    setcurrent: 2,
    getdata1: [
      {
        id: 0,
        name: '英雄',
        path: 'gamedata'
      },
      {
        id: 1,
        name: '局内道具',
        path: 'item'
      },
      {
        id: 2,
        name: '召唤师技能',
        path: 'summoner'
      }
    ]
  }),
  created () {
    this.getsum()
  },
  methods: {
    async getsum () {
      const { data } = await this.$axios.get('http://localhost:8080/getsummoner')
      this.sumlist = data
    },
    tab (bigimg, title, lv, present, index) {
      this.bigimg = bigimg
      this.title = title
      this.lv = lv
      this.present = present
      this.sel = index
    }
  },
  components: {
    Title,
    Top,
    Buttom
  }
}
</script>
<style lang="less" scoped>
.summoner {
  * {
    margin: 0;
    padding: 0;
  }
  .clearfix:after {
    content: ' ';
    visibility: hidden;
    display: block;
    clear: both;
  }
  background: url(https://game.gtimg.cn/images/yxzj/web201605/page/ny_con_bg.jpg) no-repeat;
  background-size: cover;
  .con3 {
    margin: 0px;
    padding: 0px;
    padding-top: 40px;
    width: 1200px;
    margin: 0 auto;
    .herolist-nav {
      margin: 0px;
      padding: 0px;
      margin-top: 20px;
      height: 32px;
      font-size: 16px;
      li {
        float: left;
        text-align: center;
        width: 33.333333%;
        border-bottom: 3px solid #d4d4d4;
        list-style: none;
        a {
          color: #4b4b4b;
          text-decoration: none;
        }
      }
      .current {
        border-bottom: 3px solid #3589dd;
        color: #3589dd;
        a {
          color: #3589dd;
          text-decoration: none;
        }
      }
    }
    .summoner-box {
      margin: 0;
      padding: 0;
      margin-bottom: 50px;
      padding: 35px 28px;
      border: 2px solid #e8e8e8;
      border-top: 0;
      position: relative;
      .sum-type {
        .sum-left {
          padding-top: 30px;
          float: left;
          width: 43%;
          padding-left: 16px;
          margin-right: 0;
          border-right: 1px solid #f0f0f0;
          .current{
            color: #00A383;
            img{
              border: 3px solid #00A383;
            }
          }
          li {
            width: 93px;
            text-align: center;
            float: left;
            list-style: none;
            margin: 0;
            padding: 0;
            padding-left: 15px;
            min-width: 90px;
            font-size: 14px;
            margin-bottom: 20px;
            color: #686869;
            img {
              width: 92px;
              height: 92px;
              border: 3px solid #258df2;
              border-radius: 10px 0 10px 0;
            }
          }
        }
        .sum-right {
          float: left;
          width: 50%;
          padding-top: 30px;
          padding-left: 40px;
          .sum-top {
            img {
              display: block;
              border: 0;
              border-radius: 2px 2px 2px 2px;
            }
            h4 {
              float: left;
              width: 60%;
              font-size: 16px;
              color: #00a383;
              line-height: 30px;
            }
            p {
              float: left;
              width: 60%;
              color: #9a9a9a;
              line-height: 30px;
              font-size: 14px;
            }
          }
          .sum-bottom {
            padding: 20px 0;
            line-height: 18px;
            color: #333;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
